<template>
  <el-container class="pets-container">
    <el-main class="pets-main">
      <!-- 页面标题 -->
      <!-- <el-row class="header-section">
        <el-col :span="24">
          <el-text class="page-title" size="large" tag="strong">家庭宠物管理</el-text>
        </el-col>
      </el-row> -->

      <!-- 宠物列表 -->
      <el-row :gutter="20" class="pets-grid">
        <el-col 
          v-for="pet in petsData" 
          :key="pet.id"
          :span="24" 
          :md="12" 
          :lg="8"
          class="pet-col"
        >
          <el-card class="pet-card" shadow="hover">
            <el-row class="card-content">
              <!-- 宠物信息区域 -->
              <el-col :span="24" class="info-section">
                <!-- 宠物名称和基本信息 -->
                <el-row class="pet-header">
                  <el-col :span="18">
                    <el-text class="pet-name" size="large" tag="strong">{{ pet.name }}</el-text>
                  </el-col>
                  <el-col :span="6" class="status-col">
                    <el-tag 
                      :type="pet.healthStatus === '健康' ? 'success' : pet.healthStatus === '需关注' ? 'warning' : 'danger'"
                      size="small"
                    >
                      {{ pet.healthStatus }}
                    </el-tag>
                  </el-col>
                </el-row>

                <!-- 宠物详细信息 -->
                <el-row class="pet-details">
                  <el-col :span="12">
                    <el-text size="small" type="info">
                      <el-icon :size="14"><Calendar /></el-icon>
                      年龄: {{ pet.age }}岁
                    </el-text>
                  </el-col>
                  <el-col :span="12">
                    <el-text size="small" type="info">
                      <el-icon :size="14"><Male /></el-icon>
                      {{ pet.gender }}
                    </el-text>
                  </el-col>
                </el-row>

                <!-- 疫苗情况 -->
                <el-row class="vaccine-section">
                  <el-col :span="24">
                    <el-text size="small" type="info">
                      <el-icon :size="14"><Medal /></el-icon>
                      疫苗情况:
                    </el-text>
                  </el-col>
                  <el-col :span="24" class="vaccine-tags">
                    <el-space :size="4" wrap>
                      <el-tag
                        :type="
                          pet.vaccine_status === 'vaccinated' ? 'success' :
                          pet.vaccine_status === 'unvaccinated' ? 'danger' :
                          pet.vaccine_status === 'partially' ? 'warning' : 'info'
                        "
                        size="small"
                      >
                        {{
                          pet.vaccine_status === 'vaccinated' ? '已接种' :
                          pet.vaccine_status === 'unvaccinated' ? '未接种' :
                          pet.vaccine_status === 'partially' ? '部分接种' : '未知'
                        }}
                      </el-tag>
                    </el-space>
                  </el-col>
                </el-row>

                <!-- 最后体检 -->
                <el-row class="checkup-section">
                  <el-col :span="24">
                    <el-text size="small" type="info">
                      <el-icon :size="14"><Document /></el-icon>
                      最后体检: {{ pet.last_checkup }}
                    </el-text>
                  </el-col>
                </el-row>
              </el-col>

              <!-- 视频监控区域 -->
              <el-col :span="24" class="video-section">
                <el-card class="video-card" shadow="never">
                  <template #header>
                    <el-text size="small" tag="strong">实时监控</el-text>
                  </template>
                  <div class="video-placeholder">
                    <video 
                      v-if="pet.videoStream"
                      :src="pet.videoStream"
                      class="video-player"
                      controls
                      autoplay
                      muted
                    ></video>
                    <div v-else class="no-video">
                      <el-icon :size="32" color="#909399"><VideoCamera /></el-icon>
                      <el-text size="small" type="info">暂无视频流</el-text>
                    </div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>

      <!-- 添加宠物按钮 -->
      <el-row class="add-pet-section">
        <el-col :span="24" class="add-button-col">
          <el-button 
            type="primary" 
            icon="el-icon-plus" 
            @click="addNewPet"
            circle
            size="large"
          />
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { Calendar, Male, Medal, Document, VideoCamera } from '@element-plus/icons-vue'
import { PetApi, PetInfo, PetQuery } from '@/api/family/pet'


// 宠物数据
const petsData = ref<Array<any>>([])

// 数据状态
const loading = ref(false)
// const saving = ref(false)
// const dialogVisible = ref(false)
// const isEdit = ref(false)
// const currentPetId = ref<number | null>(null)
// const petList = ref<PetInfo[]>([])

// 查询表单
const queryForm = reactive<PetQuery>({
  page: 1,
  pageSize: 10,
  name: '',
  type: '',
  health_status: ''
})

// 用户查询方法
const fetchPetsData = async () => {
  try {
    loading.value = true
    const response = await PetApi.UserGetPetList(queryForm)
    
    // petList.value = response.data || []
    petsData.value = response.data || []
    console.log("数据",response)
    // pagination.total = response.total || 0
    // pagination.pageSize = response.page_size || pagination.pageSize
  } catch (error) {
    ElMessage.error('获取宠物列表失败')
  } finally {
    loading.value = false
  }
}

// // 获取宠物数据的函数（模拟后端API调用）。。模拟数据慢慢修改
// const fetchPetsData = async () => {
//   try {
//     // 这里替换为实际的后端API调用
//     // const response = await fetch('/api/pets')
//     // const data = await response.json()
    
//     // 模拟数据
//     // const mockData = [
//     //   {
//     //     id: 1,
//     //     name: '小白',
//     //     age: 2,
//     //     gender: '公',
//     //     healthStatus: '健康',
//     //     lastCheckup: '2023-11-15',
//     //     vaccines: [
//     //       { name: '狂犬疫苗', date: '2023-10-01', status: '已接种' },
//     //       { name: '猫三联', date: '2023-12-01', status: '待接种' }
//     //     ],
//     //     videoStream: '' // 实际项目中填入视频流地址
//     //   },
//     // ]
//     const  = UserloadPets()
//     petsData.value = mockData
//   } catch (error) {
//     console.error('获取宠物数据失败:', error)
//   }
// }

// 添加新宠物
const addNewPet = () => {
  // 这里实现添加宠物的逻辑
  console.log('添加新宠物')
}

// 组件挂载时获取数据
onMounted(() => {
  fetchPetsData()
})
</script>

<style scoped>
.pets-container {
  min-height: 100vh;
  background-color: #f5f7fa;
}

.pets-main {
  padding: 30px;
  max-width: 1400px;
  margin: 0 auto;
}

.header-section {
  margin-bottom: 30px;
}

.page-title {
  font-size: 28px;
  color: #303133;
  display: block;
  text-align: center;
}

.pets-grid {
  margin: 0 -10px;
}

.pet-col {
  padding: 0 10px;
  margin-bottom: 20px;
}

.pet-card {
  height: 100%;
  border-radius: 8px;
  border: 1px solid #e4e7ed;
}

.card-content {
  padding: 15px;
}

.info-section {
  margin-bottom: 15px;
}

.pet-header {
  margin-bottom: 15px;
  align-items: center;
}

.pet-name {
  font-size: 18px;
  color: #303133;
  display: block;
}

.status-col {
  text-align: right;
}

.pet-details {
  margin-bottom: 15px;
}

.pet-details .el-col {
  margin-bottom: 5px;
}

.vaccine-section {
  margin-bottom: 15px;
}

.vaccine-tags {
  margin-top: 8px;
}

.checkup-section {
  margin-bottom: 15px;
}

.video-section {
  margin-top: 10px;
}

.video-card {
  border: 1px solid #e4e7ed;
}

.video-card ::v-deep .el-card__header {
  padding: 10px 15px;
  background-color: #fafafa;
}

.video-placeholder {
  height: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #f0f2f5;
  border-radius: 4px;
}

.video-player {
  width: 100%;
  height: 120px;
  object-fit: cover;
}

.no-video {
  text-align: center;
}

.no-video .el-text {
  display: block;
  margin-top: 8px;
}

.add-pet-section {
  margin-top: 20px;
}

.add-button-col {
  text-align: center;
}

:deep(.el-card__body) {
  padding: 0;
}

@media (max-width: 768px) {
  .pets-main {
    padding: 20px 15px;
  }
  
  .page-title {
    font-size: 24px;
  }
  
  .pet-col {
    margin-bottom: 15px;
  }
}
</style>